<template>
  <div class="icon_link_zone" id="icon_link_zone">
    <ul class="icon_link">
      <li v-for="item in indexClass">
        <router-link :to="{name:'index'}" :data-id="item.classPid">
          <img :src="item.showClassImg" alt="" width="40" />
          <p>{{item.showClassName}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  props:{
    indexClass:{
      type:Array,
      required:true
    }
  },
  data(){
    return {}
  }
}
</script>
<style lang="scss" scoped>
.icon_link_zone{
  position: relative;

  .icon_link{
    overflow: hidden;
    background:#fff;
    padding:1.3rem 0 0 0;
    width: 100%;

    li{
      width:20%;
      float:left;
      display: flex;
      justify-content: center;
      margin-bottom:1.3rem;
      text-align: center;

      p{
        font-size:1rem;
        color: #484848;
        margin:7px 0 0 0;
      }
    }
  }
}
</style>